<template class="mypage">
    <view class="fmDe">
        <canvas
            :style="styless"
            disable-scroll="true"
            @touchstart="touchLineA"
            @touchmove="moveLineA"
            @touchend="touchEndLineA"
            canvas-id="canvasLineA"
            id="canvasLineA"
            class="charts"
        />
        <div class="chartsts" v-if="weeks13">
            <span>下限({{weeks13}})</span>
            <span>上限({{weeks40}})</span>
        </div>
    </view>
</template>
<script>
import uCharts from "../components/u-charts/u-charts.js";
var lastMoveTime = null; //最后执行移动的时间戳

var that;
var canvaLineA;
export default {
    data() {
        return {
            styless: "",
            id: "",
            historylist: null,
            canvaLineA: null,
            cWidth: "",
            cHeight: "",
            pixelRatio: 1,
            weeks13: "",
            weeks40: "",
            status: "",
            monitorData: {}, // 获取到的数据
        };
    },
    onLoad(option) {
        that=this;
        var _this = this;
        _this.id = option.id;
        _this.getList();
        var { windowWidth, windowHeight } = uni.getSystemInfoSync();
        this.styless = "height:" + (windowHeight - 50) + "px";
        this.cWidth = windowWidth;
        this.cHeight = windowHeight - 50;
    },
    methods: {
        showLineA(canvasId) {
            var _this = this;
            var frodata = [];
            var get = [];
            var weeks13data = [];
            var weeks40data = [];
            var weeks13, weeks40;
            if (_this.historylist.proposalWeight13Weeks) {
                weeks13 = _this.historylist.proposalWeight13Weeks.split("-");
                weeks40 = _this.historylist.proposalWeight40Weeks.split("-");
                _this.weeks40 = weeks40[1];
                _this.weeks13 = weeks40[0];
            }

            for (var i = 0; i < 41; i++) {
                frodata.push(i);
                if (_this.historylist.proposalWeight13Weeks) {
                    if (i < 14) {
                        var fu13 = i * (Number(weeks13[0]) / 13);
                        var fu40 = i * (Number(weeks13[1]) / 13);
                        weeks13data.push(fu13.toFixed(2));
                        weeks40data.push(fu40.toFixed(2));
                    } else {
                        var fu13 =
                            (i - 13) *
                                ((Number(weeks40[0]) - Number(weeks13[0])) /
                                    27) +
                            Number(weeks13[0]);
                        var fu40 =
                            (i - 13) *
                                ((Number(weeks40[1]) - Number(weeks13[1])) /
                                    27) +
                            Number(weeks13[1]);
                        weeks13data.push(fu13.toFixed(2));
                        weeks40data.push(fu40.toFixed(2));
                    }
                }
                var dats = "";
                if (_this.historylist.weightReportDataRespones) {
                    for (var s in _this.historylist.weightReportDataRespones) {
                        if (
                            i ==
                            _this.historylist.weightReportDataRespones[s].week
                        ) {
                            dats =
                                _this.historylist.weightReportDataRespones[s]
                                    .weightData;
                            break;
                        }
                    }
                }
                if (dats) {
                    get.push(dats);
                } else {
                    get.push(null);
                }
            }
            canvaLineA = new uCharts({
                $this: that,
                canvasId: "canvasLineA",
                type: "mix",
                fontSize: 11,
                legend: { show: false },
                dataLabel: true,
                rotate: true, //横屏
                dataPointShape: true,
                background: "#FFFFFF",
                pixelRatio: _this.pixelRatio,
                categories: frodata,
                series: [
                    {
                        name: "体重增长值",
                        type: "point",
                        color: "#FA4D93",
                        data: get,
                        format: (val,sa) => {
                            return  val;
                        },
                    },
                    {
                        name: "下限",
                        type: "line",
                        lineType: "dash",
                        color: "#FA4D93",
                        data: weeks13data,
                        format: (val) => {
                            return "";
                        },
                    },
                    {
                        name: "上限",
                        type: "line",
                        lineType: "dash",
                        color: "#FA4D93",
                        data: weeks40data,
                        format: (val) => {
                            return "";
                        },
                    },
                ],
                // animation: true,
                // enableScroll: false, //开启图表拖拽功能
                xAxis: {
                    type: "grid",
                    gridType: "dash",
                    gridColor: "#979797",
                    itemCount: 41,
                    labelCount: 14,
                    format: (val) => {
                        return val;
                    },
                },
                yAxis: {
                    gridType: "dash",
                    gridColor: "#979797",
                    dashLength: 8,
                    splitNumber: 10,
                    data: [
                        {
                            axisLineColor: "#979797",
                            gridType: "solid",
                            gridColor: "#979797",
                            gridType: "solid",
                            min: 0,
                            max: 20,
                            format: (val) => {
                                return val;
                            },
                        },
                    ],
                },
                width: _this.cWidth * _this.pixelRatio,
                height: _this.cHeight * _this.pixelRatio,
                enableMarkLine: true,
                extra: {
                    line: {
                        width: "1px",
                        style: "straight",
                    },
                    tooltip: {
                        showBox: true, //是否显示半透明黑色的提示区域
                        bgColor: "#ffffff", //主体背景颜色
                        bgOpacity: 1, //背景颜色透明度
                        gridType: "solid", //辅助线类型（虚线）
                        dashLength: 5, //虚线单段长度
                        gridColor: "#FFE0EC", //辅助线颜色
                        fontColor: "#333333", //主体文字颜色
                        labelBgColor: "#DFE8FF", //标签背景颜色
                        labelBgOpacity: 0.95, //背景颜色透明度
                        labelFontColor: "#666666", //标签文字颜色
                    },
                },
                // extra: {
                //     area: {
                //         type:'straight',
                //         opacity: "0.6",
                //         daaLine:true,
                //         width:1
                //     },
                // },
            });
        },

        touchLineA(e) {
            lastMoveTime = Date.now();
        },
        moveLineA(e) {
            var _this = this;
            let currMoveTime = Date.now();
            let duration = currMoveTime - lastMoveTime;
            if (duration < Math.floor(1000 / 60)) return; //每秒60帧
            // _this.canvaLineA.showToolTip(e, {
            //     format: function (item, category) {
            //         return category + "孕周" + item.name + ":" + (item.data||'/')+'kg';
            //     },
            // });
        },
        touchEndLineA(e) {
            var _this = this;
            // _this.canvaLineA.touchLegend(e);
            // _this.canvaLineA.showToolTip(e, {
            //     format: function (item, category) {
            //         return category + "孕周" + item.name + ":" + (item.data||'/')+'kg';
            //     },
            // });
        },

        gettime(milliSecond) {
            return this.geuti(milliSecond / 1000);
        },
        getList() {
            var _this = this;
            var data = {
                monitorTypeId: "316189980122951680",
            };
            // 【移动端】获取用户监测历史详情（胎监，胎心）
            _this.$ajaxs
                .get("/mobile/v1/weight/getWeightCurveReport", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                        // console.log(this.historylist);
                        _this.showLineA("canvasLineA");
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        filterdata(data) {
            // console.log(data,'ori')
            var arr = [];
            for (var i = 0; i < data.length; i++) {
                if (i < data.length - 1) {
                    if (Math.abs(data[i][1] - data[i + 1][1]) > 30) {
                        var time =
                            Math.abs(data[i][0] - data[i + 1][0]) > 1
                                ? data[i][0] - 0 + 1
                                : data[i][0];
                        if (time == data[i][0]) {
                            arr.push([time, null]);
                        } else {
                            arr.push(data[i], [time, null]);
                        }
                    } else {
                        arr.push(data[i]);
                    }
                }
            }
            arr.push(data[data.length - 1]);
            // console.log(arr,'final')

            return arr;
        },

        getFormat(time) {
            // 时间戳转换
            if (time) {
                var data = new Date(time - 0);
                var y = data.getFullYear();
                var m =
                    data.getMonth() + 1 >= 10
                        ? data.getMonth() + 1
                        : "0" + (data.getMonth() + 1);
                var d =
                    data.getDate() > 10 ? data.getDate() : "0" + data.getDate();
                var h =
                    data.getHours() >= 10
                        ? data.getHours()
                        : "0" + data.getHours();
                var f =
                    data.getMinutes() >= 10
                        ? data.getMinutes()
                        : "0" + data.getMinutes();
                var s =
                    data.getSeconds() >= 10
                        ? data.getSeconds()
                        : "0" + data.getSeconds();
                return y + "-" + m + "-" + d + "  " + h + ":" + f + ":" + s;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.fmDe {
    background: #fff;
    color: #333;
    .charts {
        width: 100%;
    }
    .chartsts {
        text-align: right;
        color: #fa4d93;
        font-size: 24upx;
        span:nth-of-type(1) {
            display: inline-block;
           
            transform:rotate(90deg);
            -webkit-transform:rotate(90deg);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:rotate(90deg);     /*兼容-moz-引擎浏览器*/

        }
        span:nth-of-type(2) {
            display: inline-block;
            // padding-right: 20upx;
            //  padding-left: 80upx;
            transform:rotate(90deg);
            -webkit-transform:rotate(90deg);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:rotate(90deg);     /*兼容-moz-引擎浏览器*/
        }
    }
}
</style>